<template>
  <VCharts
    v-if="renderChart"
    :option="options"
    :autoresize="autoresize"
    :style="{ width, height }"
  />
</template>

<script lang="jsx">
import { defineComponent, ref, computed, nextTick } from 'vue'
import * as echarts from 'echarts'
import VCharts from 'vue-echarts'
export default defineComponent({
  components: {
    VCharts
  },
  props: {
    options: {
      type: Object,
      default () {
        return {}
      }
    },
    autoresize: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  setup () {
    const renderChart = ref(false)
    // wait container expand
    nextTick(() => {
      renderChart.value = true
    })
    return {
      renderChart
    }
  }
})
</script>

<style scoped lang="less"></style>
